<script setup lang="ts">
import {
  RefreshFilled as RefreshIcon,
  AddFilled as AddIcon,
  DeleteFilled as DeleteIcon
} from '@vicons/material'
import { NPopconfirm, NSpace } from 'naive-ui'

defineOptions({
  name: 'TableHeaderOperate'
})

interface Props {
  disabledDelete?: boolean
  loading?: boolean
}

defineProps<Props>()

interface Emits {
  (e: 'add'): void
  (e: 'delete'): void
  (e: 'refresh'): void
}

const emit = defineEmits<Emits>()

function add() {
  emit('add')
}

function batchDelete() {
  emit('delete')
}

function refresh() {
  emit('refresh')
}
</script>

<template>
  <NSpace :wrap="false" justify="end">
    <slot name="prefix"></slot>
    <slot name="default">
      <NButton size="small" ghost type="primary" @click="add">
        <template #icon>
          <AddIcon />
        </template>
        新增
      </NButton>
      <NPopconfirm @positive-click="batchDelete">
        <template #trigger>
          <NButton size="small" ghost type="error" :disabled="disabledDelete">
            <template #icon>
              <DeleteIcon />
            </template>
            批量删除
          </NButton>
        </template>
        确定删除吗？
      </NPopconfirm>
    </slot>
    <NButton size="small" @click="refresh">
      <template #icon>
        <RefreshIcon :class="{ 'icon-spin': loading }" />
      </template>
      刷新
    </NButton>
  </NSpace>
</template>

<style scoped>
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-spin {
  animation: spin 1s infinite linear;
}
</style>
